// 获取当前日期
// 获取未来七天的日期
function getFutureSevenDays() {
    const today = new Date(); // 当前日期
    const dateArray = [];

    for (let i = 0; i < 7; i++) {
        const futureDate = new Date(today);
        futureDate.setDate(today.getDate() + i); // 增加 i 天

        // 格式化日期为 "YYYY-MM-DD"
        const formattedDate = futureDate.toISOString().split('T')[0];
        dateArray.push({ date: formattedDate, fullDate: futureDate });
    }

    return dateArray;
}

// 获取当前时间，判断是否超过最后一个时间段
function isDateDisabled(dateObj) {
    const currentTime = new Date(); // 当前系统时间
    const lastTimeSlot = "17:00"; // 最后一个时间段结束时间（根据你的时间段）
    const [lastHour, lastMinute] = lastTimeSlot.split(":").map(Number);

    // 构造当天的最后时间段的结束时间
    const endOfLastSlot = new Date(dateObj.fullDate);
    endOfLastSlot.setHours(lastHour, lastMinute, 0);

    // 判断当前时间是否已经超过最后一个时间段
    return currentTime > endOfLastSlot;
}

// 将未来七天的日期填充到 select 元素中
function populateDateSelect() {
    const dateSelect = document.getElementById('date-select');
    const futureDates = getFutureSevenDays();

    futureDates.forEach(dateObj => {
        const option = document.createElement('option');
        option.value = dateObj.date; // 设置选项的值为日期
        option.textContent = dateObj.date; // 设置显示的文本为日期

        // 判断是否需要禁用该日期
        if (isDateDisabled(dateObj)) {
            option.disabled = true;
            option.textContent += " （不可预约）";
        }

        dateSelect.appendChild(option); // 将选项添加到 select 中
    });
}
var contextPath = window.location.pathname.substring(0, window.location.pathname.indexOf("/", 1));
// 执行日期填充
populateDateSelect();

// 定义函数，用于处理所有按钮的状态
function updateButtonStates() {
    document.querySelectorAll('#tbody tr').forEach(function (row) {
        const state = row.querySelector('td:nth-child(5)').textContent.trim();

        // 处理完成按钮
        const completedButton = row.querySelector('.completed');
        if (completedButton) {
            if (state === '已完成'||state === '已取消') {
                completedButton.disabled = true;
                completedButton.style.color = '#ccc';
                completedButton.style.cursor = 'no-drop';
            } else {
                completedButton.disabled = false;
                completedButton.style.color = '';
                completedButton.style.cursor = 'pointer';
            }
        }

        // 处理取消按钮
        const cancelButton = row.querySelector('.cancel');
        if (cancelButton) {
            if (state === '已取消'||state === '已完成') {
                cancelButton.disabled = true;
                cancelButton.style.color = '#ccc';
                cancelButton.style.cursor = 'no-drop';
            } else {
                cancelButton.disabled = false;
                cancelButton.style.color = '';
                cancelButton.style.cursor = 'pointer';
            }
        }
    });
}

// 监听 #tbody 的 DOM 变化
const tbody = document.querySelector('#tbody');
const observer = new MutationObserver(function () {
    updateButtonStates(); // 表格内容变化时自动更新按钮状态
});

// 配置观察器（监听子节点和子树变化）
observer.observe(tbody, { childList: true, subtree: false });


// 加载数据
function loadAllReservation() {
    $.ajax({
        url: contextPath + '/loadAllReservationServlet', // 后端搜索处理的路径
        method: 'POST',
        success: function (response) {
            // 判断返回结果是否为数组（表示有数据）
            if (Array.isArray(response)) {
                // 清空表格
                console.log("查询成功：", response);
                $('#tbody').empty();
                // 填充搜索结果
                if (response.length > 0) {
                    response.forEach(function (reservation) {
                        // 构建表格行
                        var row = `<tr>
                        <td><input type="checkbox" name="reservationId" value="${reservation.id}" class="item"></td>
                        <td>${reservation.id}</td>
                        <td>${reservation.username || '无'}</td>
                        <td>${reservation.serviceName || '无'}</td>
                        <td>${reservation.state || '无'}</td>
                        <td>${reservation.fullname || '无'}</td>
                        <td>${reservation.meirongshi_name || '无'}</td>
                        <td>${reservation.service_date || '无'}</td>
                        <td>${reservation.service_period || '无'}</td>
                        <td>${reservation.user_tel || '无'}</td>
                        <td class="remark">${reservation.remark || '无备注'}</td>
                        <td class="caozuo">
                            <button class="completed" data-id="${reservation.id}">完成</button>
                            <button class="cancel" data-id="${reservation.id}">取消</button>
                            <button class="delete" data-id="${reservation.id}">删除</button>
                        </td>
                    </tr>`;
                        $('#tbody').append(row);
                    });
                } else {
                    $('#tbody').empty();
                    var row=`
                            <tr><td colspan="12">没有数据</td></tr>
                        `;
                    $('#tbody').append(row);
                }
            } else {
                // 如果返回的不是数组，则认为是错误信息或提示信息
                alert(response); // 弹出提示信息
            }
        },
        error: function (xhr, status, error) {
            console.error("请求出错：", status, error);
            alert("请求出错，请稍后再试！");
        }
    });

}
$(document).ready(function() {
    // 搜索预定
    loadAllReservation();
});
// 搜索ajax
$(document).ready(function() {
    // 点击搜索按钮
    $('#searchbtn').on('click', function () {
        var searchQuery = $('.search').val(); // 获取搜索框中的值
        if (searchQuery.trim() === '') {
            loadAllReservation();
            return;
        }
        searchReservations(searchQuery);
    });

    // 按回车键也触发搜索
    $('.search').on('keypress', function (e) {
        if (e.which === 13) {
            $('#searchbtn').click();
        }
    });

    // 搜索预定
    function searchReservations(query) {
        $.ajax({
            url: contextPath + '/searchReservationsServlet', // 后端搜索处理的路径
            method: 'POST',
            data: { query: query }, // 发送搜索关键字
            success: function (response) {
                // 判断返回结果是否为数组（表示有数据）
                if (Array.isArray(response)) {
                    // 清空表格
                    console.log("查询成功：", response);
                    $('#tbody').empty();

                    // 填充搜索结果
                    if (response.length > 0) {
                        response.forEach(function (reservation) {
                            // 构建表格行
                            var row = `<tr>
                        <td><input type="checkbox" name="reservationId" value="${reservation.id}" class="item"></td>
                        <td>${reservation.id}</td>
                        <td>${reservation.username || '无'}</td>
                        <td>${reservation.serviceName || '无'}</td>
                        <td>${reservation.state || '无'}</td>
                        <td>${reservation.fullname || '无'}</td>
                        <td>${reservation.meirongshi_name || '无'}</td>
                        <td>${reservation.service_date || '无'}</td>
                        <td>${reservation.service_period || '无'}</td>
                        <td>${reservation.user_tel || '无'}</td>
                        <td class="remark">${reservation.remark || '无备注'}</td>
                        <td class="caozuo">
                            <button class="completed" data-id="${reservation.id}">完成</button>
                            <button class="cancel" data-id="${reservation.id}">取消</button>
                            <button class="delete" data-id="${reservation.id}">删除</button>
                        </td>
                    </tr>`;
                            $('#tbody').append(row);
                            updateButtonStates();
                        });
                    } else {
                        alert('没有找到相关预定');
                    }
                } else {
                    // 如果返回的不是数组，则认为是错误信息或提示信息
                    console.log("查询失败：", response);
                    alert(response); // 弹出提示信息
                }
            },
            error: function (xhr, status, error) {
                console.error("请求出错：", status, error);
                alert("请求出错，请稍后再试！");
            }
        });

    }
});
var add = document.querySelector('.add');
var change=$('.add_appoitment');
var overlay=$('.overlay');
add.onclick = function(){
    change.fadeIn();
    overlay.fadeIn();
}

var cancel = document.querySelector('.add_cancel');
cancel.onclick = function(){
    change.fadeOut();
    overlay.fadeOut();
}

//ajax新增预约
var submit_app = document.querySelector('.submit_app');

submit_app.onclick = function () {
    // 获取表单数据
    var username = null;
    var name = $('#name').val().trim(); // 去除空格
    var tel = $('#tel').val().trim();
    var service_id = $('#service_name').val();
    var beau_id = $('#beau_name').val();
    var dateSelect = $('#date-select').val();
    var period = $('#period').val();
    // 验证输入的字段
    if (name === '') {
        alert("请输入姓名！");
        $('#name').focus(); // 聚焦到姓名输入框
        return;
    }
    if (tel === '') {
        alert('请输入手机号！');
        $('#tel').focus(); // 聚焦到手机号输入框
        return;
    }
    if (!/^[0-9]{11}$/.test(tel)) { // 验证手机号码是否为11位数字
        alert('请输入有效的手机号！');
        $('#tel').focus();
        return;
    }
    if (service_id === null) {
        alert('请选择预约项目！');
        return;
    }
    if (beau_id === null) {
        alert('请选择美容师！');
        return;
    }
    if (dateSelect === null ) {
        alert('请选择预约日期！');
        return;
    }
    if (period === null) {
        alert('请选择时间段！');
        return;
    }

    // 设置请求的 URL 和参数
    var url = contextPath + '/ReservationServlet';
    var action = 'add';

    // 发送 AJAX 请求
    $.ajax({
        url: url,
        type: 'POST', // 请求类型
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
        data: {
            username: username,
            name: name,
            tel: tel,
            service_id: service_id,
            beau_id: beau_id,
            dateSelect: dateSelect,
            period: period,
            action: action
        },
        beforeSend: function () {
            console.log('Sending data:', { action: action });
        },
        success: function (data, status) {
            // 请求成功的回调函数
            if (status === 'success') {
                alert('操作成功!');
                location.reload();  // 刷新页面或可以用其他方式更新页面
            }
        },
        error: function (xhr, status, error) {
            // 请求失败的回调函数
            alert('新增操作失败!');
        },
        complete: function () {
            // 无论请求成功与否都执行的操作
            // 关闭模态框和遮罩层
            var change = document.querySelector('.add_appoitment');
            var overlay = document.querySelector('.overlay');
            change.style.display = 'none';
            overlay.style.display = 'none';
        }
    });
};

//备注信息为null时，用空格代替
$('.remark').each(function () {
    if ($(this).text().trim() === 'null') {
        $(this).text(' '); // 用空格替换 'null'
    }
});

// 存储当前操作的预约ID
let currentReservationId = null;
let state = null;

// 事件委托绑定到 tbody
// 监听 #tbody 内的点击事件
document.querySelector('#tbody').addEventListener('click', function (event) {
    const target = event.target;

    // 按钮类型和模态框的映射
    const actionModalMap = {
        'completed': '.completed-modal',
        'cancel': '.cancel-modal',
        'delete': '.delete-modal'
    };

    // 判断是否点击了目标按钮
    const action = Object.keys(actionModalMap).find(key => target.classList.contains(key));
    if (action) {
        // 直接获取绑定在按钮上的预约 ID
        currentReservationId = target.dataset.id;
        console.log(`${action === 'completed' ? '完成' : action === 'cancel' ? '取消' : '删除'}操作的预约ID：`, currentReservationId);

        // 显示对应的模态框
        const modalSelector = actionModalMap[action];
        $(modalSelector).fadeIn();
        overlay.fadeIn();
    }
});


// 关闭模态框的操作
document.querySelectorAll('.modal-cancel').forEach(function (button) {
    button.onclick = function () {
        $('.completed-modal').fadeOut();
        $('.cancel-modal').fadeOut();
        $('.delete-modal').fadeOut();
        overlay.fadeOut();
    };
});

// 确认模态框的操作
document.querySelectorAll('.modal-confirm').forEach(function (button) {
    button.onclick = function () {
        const reservationId = currentReservationId;
        let action;

        // 判断哪个模态框被点击
        if (this.closest('.completed-modal')) {
            action = 'completed';
        } else if (this.closest('.cancel-modal')) {
            action = 'canceled';
        } else if (this.closest('.delete-modal')) {
            action = 'deleted';
        }

        // 创建请求的 URL
        const url = contextPath + '/ReservationServlet';

        // 使用 AJAX 发送请求
        $.ajax({
            url: url,
            type: 'POST',
            data: {
                id: reservationId,
                action: action
            },
            success: function (data, status) {
                if (status === 'success') {
                    // 显示操作成功的提示
                    alert(`${action === 'completed' ? '完成' : action === 'canceled' ? '取消' : '删除'}操作成功!`);

                    // 根据操作更新表格内容
                    let row = document.querySelector(`button[data-id="${reservationId}"]`).closest('tr'); // 通过按钮的 data-id 查找对应的行
                    if (row) {
                        let stateCell = row.querySelector('td:nth-child(5)'); // 状态所在的列
                        if (action === 'completed') {
                            stateCell.textContent = '已完成';
                        } else if (action === 'canceled') {
                            stateCell.textContent = '已取消';
                        } else if (action === 'deleted') {
                            row.style.display = 'none'; // 隐藏被删除的行
                        }
                    }
                    updateButtonStates();
                }
            },
            error: function (xhr, status, error) {
                alert(`${action === 'completed' ? '完成' : action === 'canceled' ? '取消' : '删除'}操作失败!`);
            },
            complete: function () {
                document.querySelector('.completed-modal').style.display = 'none';
                document.querySelector('.cancel-modal').style.display = 'none';
                document.querySelector('.delete-modal').style.display = 'none';
                overlay.fadeOut();
            }
        });
    };
});

// 动态生成预约项目
$(document).ready(function() {
    $.ajax({
        url: contextPath+'/getAllServiceServlet',
        type: 'GET',
        success: function(data) {
            // 假设返回的是一个数组，包含预约项目的名称
            var serviceNameSelect = $('#service_name');
            serviceNameSelect.append('<option value="" disabled selected>请选择项目</option>')
            data.forEach(function(item) {
                // 添加预约项目到下拉框
                serviceNameSelect.append('<option value="' + item.id + '">' + item.name + '</option>');
            });
        },
        error: function(xhr, status, error) {
            console.error('获取预约项目失败:', error);
        }
    });
});
// 根据项目生成美容师选择框
$(document).ready(function () {
    $('#service_name').change(function () {
        var serviceId = $(this).val();
        var beau_name = $('#beau_name');
            $.ajax({
                url: contextPath+'/getBeauByServiceIdServlet',
                type: 'GET',
                data: { serviceId: serviceId },
                dataType: 'json',
                success: function (data) {
                    beau_name.empty();
                    beau_name.append('<option value="" disabled selected>请选择美容师</option>');
                    data.forEach(function (stylist) {
                        beau_name.append(
                            '<option value="' + stylist.id + '">' + stylist.name + '</option>'
                        );
                    });
                },
                error: function () {
                    alert('加载美容师失败！');
                }
            });
    });
});
$(document).ready(function () {
    // 全选/取消全选功能
    $('#selectAll').on('change', function () {
        $('.item').prop('checked', this.checked); // 设置所有子复选框的状态与全选复选框一致
        toggleBatchButtons(); // 更新批量操作按钮的显示
    });

    // 子复选框状态改变时，更新全选复选框的状态，并检查是否显示批量操作按钮
    $(document).on('change', '.item', function () {
        const allChecked = $('.item').length === $('.item:checked').length;
        $('#selectAll').prop('checked', allChecked);
        toggleBatchButtons(); // 更新批量操作按钮的显示
    });

    // 更新批量操作按钮的显示状态
    function toggleBatchButtons() {
        const selectedCount = $('.item:checked').length;
        if (selectedCount > 0) {
            $('.batch').fadeIn(); // 显示批量操作按钮
        } else {
            $('.batch').fadeOut(); // 隐藏批量操作按钮
        }
    }

    // 打开模态框函数
    function openModal(modalSelector) {
        $(modalSelector).fadeIn(); // 淡入显示模态框
        $('.overlay').fadeIn(); // 淡入显示遮罩层
    }

    // 关闭模态框函数
    function closeModal() {
        $('.modal').fadeOut(); // 淡出隐藏所有模态框
        $('.overlay').fadeOut(); // 淡出隐藏遮罩层
    }

    // 绑定打开模态框的按钮
    $('#batch1').on('click', function () {
        openModal('.batch1-modal'); // 打开完成模态框
    });

    $('#batch2').on('click', function () {
        openModal('.cancel-modal'); // 打开取消模态框
    });

    $('#batch3').on('click', function () {
        openModal('.delete-modal'); // 打开删除模态框
    });

    // 绑定关闭模态框的按钮
    $('.batch-cancel').on('click', function () {
        closeModal(); // 点击取消按钮关闭模态框
    });

    // 点击遮罩层关闭模态框
   overlay.on('click', function () {
        closeModal(); // 点击遮罩关闭模态框
       change.fadeOut();
    });

    // 模态框确认按钮操作
    function handleBatchOperation(action, successMessage) {
        const selectedIds = $('.item:checked').map(function () {
            return $(this).val();
        }).get(); // 转为数组
        if (selectedIds.length === 0) {
            alert('请先选择至少一个预约！');
            return;
        }
        console.log("发送的数据：", JSON.stringify({ action: action, ids: selectedIds }));

        // 发送 AJAX 请求
        $.ajax({
            type: 'POST',
            url: contextPath + '/BatchOperationServlet', // 后端统一接口
            data: JSON.stringify({ action: action, ids: selectedIds }), // 传递 action 和 ids
            contentType: 'application/json',
            success: function (response) {
                alert(successMessage);
                location.reload(); // 操作完成后刷新页面
            },
            error: function () {
                alert('操作失败，请稍后重试！');
            }
        });
    }

    // 模态框确认按钮点击事件
    $('.batch-confirm').on('click', function () {
        let modalClass = $(this).closest('.modal').attr('class');

        if (modalClass.includes('batch1-modal')) {
            handleBatchOperation('complete', '批量完成成功！');
        } else if (modalClass.includes('cancel-modal')) {
            handleBatchOperation('cancel', '批量取消成功！');
        } else if (modalClass.includes('delete-modal')) {
            handleBatchOperation('delete', '批量删除成功！');
        }

        $('.overlay, .modal').fadeOut(); // 隐藏模态框
    });
});

document.addEventListener('DOMContentLoaded', function () {
    const dateInput = document.getElementById('data-select'); // 日期选择器
    const timeSelect = document.getElementById('period'); // 时间段选择器
    const timeOptions = timeSelect.querySelectorAll('option[data-time]'); // 时间段选项

    // 日期更改事件监听
    dateInput.addEventListener('change', function () {
        const selectedDate = new Date(dateInput.value); // 用户选择的日期
        const currentDate = new Date(); // 当前系统日期

        // 遍历每个时间段选项
        timeOptions.forEach(option => {
            option.disabled = false; // 重置为可选
            option.textContent = option.textContent.replace(' (已过期)', ''); // 清除过期提示

            const [hours, minutes] = option.getAttribute('data-time').split(':');
            const optionTime = new Date(selectedDate); // 基于所选日期创建选项时间
            optionTime.setHours(parseInt(hours, 10), parseInt(minutes, 10), 0);

            // 如果是今天并且时间段已过期，则禁用该选项
            if (
                selectedDate.toDateString() === currentDate.toDateString() &&
                currentDate > optionTime
            ) {
                option.disabled = true;
                option.textContent += ' (已过期)';
            }
        });
    });
});
